<template>
    <view class="i-auth-body" :style="`background-image:url(${uniConfig.ssoPath + bgGround});background-size:cover;`">
        <view class="i-logo">
            
        </view>
        <uv-button 
        v-if="checkLogin"
        open-type="getPhoneNumber"
        lang="zh_CN"
        @getphonenumber="getPhoneNum"
         shape="circle" style="margin:16px 0" type="primary">手机号一键登录</uv-button>
         <uv-button 
         v-else
         shape="circle" style="margin:16px 0" type="primary" @click="openCheck">手机号一键登录</uv-button>
        <!-- <uv-button shape="circle" class="bg-line-color" style="margin:16px 0"  :hairline="true" :plain="true" @click="openOtherAuth">其它手机号登录</uv-button> -->
        <view class="i-check-body">
            <uv-checkbox-group 
                v-model="checkLogin" 
                shape="circle">
                <uv-checkbox 
                    label="登录即表明同意"
                    name=""
                ></uv-checkbox>
            </uv-checkbox-group>
            <uv-link @click="navigateToWeb('https://wx.sijiyoufu.com/static/file/agreement.html')" text="《用户协议》"></uv-link>
            <uv-link @click="navigateToWeb('https://wx.sijiyoufu.com/static/file/privacy.html')" text="《隐私政策》"></uv-link>
        </view>
        <uv-popup ref="popup" round="12" mode="bottom" custom-style="height: 50vh;" bgColor="#f5f5f5" :closeable="true" closeIconPos="top-right">
			<MobileAuth/>
		</uv-popup>
    </view>
</template>
  
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { useUCenterStore } from '@/stores/uCenter'
import MobileAuth from "@/components/auth"
import local from "@/utils/local";
const checkLogin = ref<any>(false)
const ucenter = useUCenterStore();
import { uniConfig } from '@/config/index'
import {
  bindMobileByWx
} from '@/api/Ucenter'

const popup = ref()
const openOtherAuth = () => {
  if(checkLogin.value){
      popup.value.open()
  }else openCheck()
}

const navigateToWeb = (res : any) => {
	uni.navigateTo({
		url:`/pages/web/index?url=${res}`
	})
}

const openCheck = () => {
  uni.showToast({
      title: '请阅读并勾选隐私和服务协议',
      icon: 'none'
  })
  return false
}

const vops = ref<any>({})
const getPhoneNum = (ops : any) => {
  if (ops.errMsg !== 'getPhoneNumber:ok') {
    return
  }
  vops.value = ops
  bindMobile()
}

const member = ref<any>({})
const setMemberInfo = (memberInfo : any) => {
  uni.setStorageSync('memberInfo', memberInfo)
  ucenter.$patch({ 'memberInfo': memberInfo})
  member.value = memberInfo
  uni.setStorageSync('isCheckOutLogin', false)
  if (ucenter.redirectPath) {
    uni.navigateBack()
    ucenter.$patch({ 'redirectPath': ''})
  } else {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }
}
const bindMobileFactory = (code : any,iv : any,encryptedData : any,inviterId = '') => {
  bindMobileByWx({
    code,
    iv,
    encryptedData,
    inviterId
  }).then((member : any) => {
    if (member.success) {
      let memberInfo = member.data
      setMemberInfo(memberInfo)
    } else {
      uni.showToast({
        icon: 'error',
        title: member.msg
      })
    }
  })
}
const bindMobile = () => {
  uni.login({
    success: res => {
      if (res.code) {
        const {iv,encryptedData} = vops.value
        const code = res.code
        uni.getStorage({
          key: 'invite',
          success: function (res) {
            bindMobileFactory(code,iv,encryptedData,res.data)
          },
          fail: function (res) {
            bindMobileFactory(code,iv,encryptedData)
          },
        })        
      }
    }
  })
}
const bgGround = ref<any>("")
onLoad(async (options : any) => {
  uni.getStorage({
    key: 'bg',
    success: function (res) {
      bgGround.value = res.data
    }
  })   
  // if(!ucenter.memberInfo.openid){
  //   local.miniAppFetchApiCheckLogin().then(res => {
  //     ucenter.$patch({ memberInfo: res })
  //   })
  // }
})
</script>
<style lang="scss">
page{
  background-image:url('https://images.sijiyoufu.com/static/imgs/project/image1.jpg?v=11000')
}
.i-auth-body{
    width:100vw;
    height:100vh;
    position:relative;
    padding:16px;box-sizing:border-box;
}
.i-auth-body .uv-button--primary{
  background:linear-gradient(136deg,rgb(245,238,182) 0%,  rgb(152 116 69) 100%) !important;
  border:none !important;
}
.i-logo{
    margin: 20vh 0 32px;
    display: flex;
    justify-content: center;
    height:52vh;
}
.i-logo image{width:62%;}
.i-check-body{
    display: flex;
    margin-top:32px;
    color:#fff !important;
}
.i-check-body .uv-link,.i-check-body .uv-checkbox-group{flex: none !important;}
.i-auth-body .uv-button-wrapper{
    margin:16px 0;
}
.auth-other{
    padding:16px;
}
.auth-other-title{
    font-size:16px;
    font-weight: 600;
    padding:0px 0 32px 0;
    display: block;
}
.auth-other .uv-input{
    background: #fff !important;
    border: 0 !important;
    margin: 16px 0 !important;
    padding:16px !important;
}
.auth-other .uv-input .uv-button-wrapper{margin: 0px !important}
.i-auth-body .uv-checkbox__label-wrap text{
  color:#fff !important;
}
</style>